<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ZZU物联网实验室</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<!-- CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/ionicons.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/responsive.css">
<link
	href="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/css/bootstrap-select.min.css"
	rel="stylesheet">
<link rel="stylesheet" href="css/bootstrap(3.2).min.css">
<link
	href="https://cdn.bootcss.com/bootstrap/3.1.0/css/bootstrap.min.css"
	rel="stylesheet">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script
	src="https://cdn.bootcss.com/bootstrap-select/2.0.0-beta1/js/bootstrap-select.min.js"></script>
<script>
	$(function() {
		$('#subBtn').on('click', function() {

			let obj = {};
			obj.name = $("#name").val();
			obj.qq = $("#qq").val();
			obj.sex = $("#sex").val();
			obj.sid = $("#sid").val();
			obj.major = $("#major").val();
			obj.note = $("#note").val();
			obj.phone = $.trim($('#phone').val());
		
			if (obj.name == '' || obj.name == null) {
				tip('姓名不可为空');
				return;
			}
			if (obj.sid == '' || obj.sid == null) {
				console.log(obj)
				tip('年级不可为空！');
				return;
			}
			if (obj.sex == '' || obj.sex == null) {
				tip('请选择您的性别！');
				return;
			}
			if (obj.major == '' || obj.major == null) {
				tip('请选择您的专业！');
				return;
			}

			var bValidate = RegExp(/^[1-9][0-9]{4,9}$/).test(obj.qq);
			if (!bValidate) {
				tip('请输入真实的QQ');
				return;
			}

			var phoneReg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;

			if (!phoneReg.test(obj.phone)) {
				tip('请输入有效的手机号码！');
				return;
			}
			if (obj.note == '' || obj.note == null ) {
				tip('请填写您的简介！');
				return;
			}
			if (obj.note.length < 10  ) {
				tip('请认真填写您的简介(字数太少)！');
				return;
			}
			
			console.log(JSON.parse(JSON.stringify(obj)))
			$.ajax({
				url : "add",
				type : "POST",
				data : JSON.stringify(obj),
				scriptCharset : 'utf-8',
				contentType : "application/json; charset=utf-8",
				success : function(res) {
					console.log(JSON.parse(res))
					let data = JSON.parse(res)
					if (data.code === 0) {
						tip("报名" + data.msg + "！")
						setTimeout("location.href='index'", 1000)
					} else {
						tip(data.msg)
					}
				},
				error : function(res) {
					console.log("res", res);
				}
			});
			/* console.log('data', $('form').serializeArray()) */
		})
	})

	function tip(msg) {
		$("#warn").text(msg)
		$("#modal-282051").click()
	}
	function join() {
		$("#modal-joins").click()
	}
	function contact() {
		$("#modal-contacts").click()
	}

	function scroll(id) {
		$("." + id).HoverTreeScroll(1000);
	}
</script>
<style type="text/css">
html, body {
	widght: 100%;
	height: auto;
	overflow-x: hidden
}

::-webkit-scrollbar {
	display: none;
}

.selector::-webkit-scrollbar {
	display: none
}
</style>

</head>
<body>
	<#include "../modal/join.ftl"/>
	<#include "../modal/contact.ftl"/>
	<#include "../modal/tips.ftl"/>
	<a id="modal-joins" href="#modal-join" style="display: none"
		role="button" class="" data-toggle="modal"></a>
	<a id="modal-282051" href="#modal-warns" style="display: none"
		role="button" class="" data-toggle="modal"></a>
	<a id="modal-contacts" href="#modal-contact" style="display: none"
		role="button" class="" data-toggle="modal"></a>



	<!-- Header Start -->
	<header>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<!-- header Nav Start -->
					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<!-- Brand and toggle get grouped for better mobile display -->
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed"
									data-toggle="collapse"
									data-target="#bs-example-navbar-collapse-1">
									<span class="sr-only">Toggle navigation</span> <span
										class="icon-bar"></span> <span class="icon-bar"></span> <span
										class="icon-bar"></span>
								</button>

							</div>
							<!-- Collect the nav links, forms, and other content for toggling -->
							<a class="navbar-brand" href="index.html"> <img
								src="img/zzuiotlab.png"
								style="position: absolute; top: 15px; left: -10px; padding-bottom: 10px; margin-bottom: 10px"
								width='255px' alt="Logo">
							</a> <br /> <br />

							<div class="collapse navbar-collapse"
								id="bs-example-navbar-collapse-1">

								<ul class="nav navbar-nav navbar-right">
									<li><a href="#">首页</a></li>
									<li><a href="#intro" target="_self">实验室简介</a></li>
									<li><a href="#wedo" target="_self">学习内容</a></li>
									<li><a href="#join" onclick="join()">我要报名</a></li>
									<li><a href="#" onclick="contact()">联系我们</a></li>
								</ul>
							</div>
							<!-- /.navbar-collapse -->
						</div>
						<!-- /.container-fluid -->
					</nav>
				</div>
			</div>
		</div>
	</header>
	<!-- header close -->

	<!-- Slider Start -->
	<section id="slider">
		<div class="container">
			<div class="row">
				<div class="col-md-10 col-md-offset-2">
					<div class="block">
						<h1 class="animated fadeInUp">Internet of things lab of zzu</h1>
						<p class="animated fadeInUp">
							在这里你能依托项目学习到扎实的知识，在这里你能将自己的兴趣发挥到极致，在这里有许多项目经验丰富的学长学姐辅导你，在这里拥有优越的开发资源和环境，快来加入我们吧！
							<br /> <br /> 暂定9月18日（周三）晚进行笔试和面试，具体内容稍后通知。<br /> <a
								class="btn btn-info" onclick="contact()">查看详情<span
								class="glyphicon glyphicon-qrcode" /></a>
						</p>
					</div>

				</div>
			</div>
		</div>
	</section>
	<!-- Wrapper Start -->
	<section name="intro" id="intro">
		<div class="container">
			<div class="row">
				<div class="col-md-7 col-sm-12">
					<div class="block">
						<div class="section-title">


							<h2>关于我们</h2>
							<p>
								<b></b>
							</p>
						</div>
						<p>
							<b>实验室组成：</b>物联网实验室是由众实验室老师带领，由研究生和本科生组成的实验室，主要分为硬件组、设计组，这里有优越的开发资源和环境，依托丰富的软硬件设施，这里可以静心学习和进修！</br>
							<b>日常工作：</b>平常我们会在老师的带领下，去完成一些项目，譬如智能家居、物联网设备等，过程中我们会得到老师的支持和学长学姐们的辅导!在做项目的过程中，我们不仅会学到专业知识，更能获得做项目的经验以及团队协作能力！</br>
							<b>项目内容：</b>PCB电路板设计、硬件嵌入式编程、3D建模、动画制作等，物联网实验室是一个功能稍齐全的一个实验室，我们这里可以做好多有趣又有意义的内容！</br>
							<b>科技比赛：</b>我们平常可以拿着自己的项目去参加一些重量级比赛，也可以根据比赛要求去做一些有科技含量的参赛作品！
						</p>
					</div>
				</div>
				<!-- .col-md-7 close -->
				<div class="col-md-5 col-sm-12">
					<div class="block">
						<img src="img/wrapper-img.png" alt="Img">
					</div>
				</div>
				<!-- .col-md-5 close -->
			</div>
		</div>
	</section>

	<hr
		style="border: 0; width: 80%; background-color: #808080; height: 1px;">
	<!-- Service Start -->
	<section id="service">
		<div name="wedo" id="wedo" class="container">
			<div class="row">
				<div class="section-title">
					<h2>学习内容</h2>
				</div>
			</div>
			<div class="row">
				<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-th"></i>
						<h4>PCB设计</h4>
						<p>为了优化电路并减小PCB体积，ZZU物联网实验室需要自助设计简单的PCB电路板</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-lock"></i>
						<h4>嵌入式编程</h4>
						<p>平常我们会对单片机进行硬件编程，例如Arduino、89C51、STM32、NRF51822、ESP8266等</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-wrench"></i>
						<h4>机械设计</h4>
						<p>我们在做一个完整的项目时，往往需要机械的支持，比如齿轮与齿轮的协调等</p>
					</div>
				</div>
				<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-inbox"></i>
						<h4>3D建模</h4>
						<p>我们需要用3Dmax、玛雅等设计软件自助设计一些3D零件模型，然后进行3D打印</p>
					</div>
				</div>
					<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-tree-deciduous"></i>
						<h4>动画设计</h4>
						<p>为了方便展示项目的工作原理、我们通常要设计一个项目动画，</p>
					</div>
				</div>
			
				<div class="col-sm-6 col-md-4" style="height:214px;">
					<div class="service-item">
						<i class="glyphicon glyphicon-certificate"></i>
						<h4>其他</h4>
						<p>项目规划，文档整理，PPT制作，项目路演</p>
					</div>
				</div>
			</div>
	
			
			</div>
		</div>
	</section>
	<!-- Call to action Start -->
	<section id="call-to-action">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="block">
						<h2>最新消息：</h2>
						<p>
							物联网实验室是由众实验室老师带领，由研究生和本科生组成的实验室，主要分为硬件组（面向嵌入式、物联网）、设计组，现在主要开始面向软院18级各专业进行招新，19级同学可以参与，这里有优越的开发资源和环境，依托丰富的软硬件设施，这里可以静心地做项目参加比赛！欢迎你的加入！！<br />
						</p>

						<a class="btn btn-default btn-call-to-action" href="#"
							onclick="join()">我要报名</a>
					</div>
				</div>
			</div>
		</div>
	</section>


	<!-- footer Start -->
	<footer>
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="footer-manu">
						<ul>
							<li><a href="#">About Us</a></li>
							<li><a href="#">Contact us</a></li>
							<li><a href="#">How it works</a></li>
							<li><a href="#">Support</a></li>
							<li><a href="#">Terms</a></li>
						</ul>
					</div>
				</div>
				<div class="col-md-12" style="color: #e73a2f; font-weight: bolder">
					@ Internet of things lab of zzu</div>
			</div>
		</div>
	</footer>




</body>
</html>